import { useEffect ,useRef} from "react";
import './index.scss'
import a from '/images/2.png'
import { Button } from "antd";
import { useNavigate } from "react-router-dom";
const Text3 = ()=>{
    const canvas = useRef(null);
    let ctx = null;
    const navite = useNavigate();
    useEffect(()=>{
        ctx = canvas.current.getContext('2d');
        //叠加模式，source-in，source-out，source-atop，destination-over，destination-in，destination-out，destination-atop，lighter，copy，xor
        const img = new Image();
        img.src = a;
        img.onload = ()=>{
            ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height);
        }
    },[])
    let isDown = false;
    const down = ()=>{
        isDown = true;
    }
    const up = ()=>{
        isDown = false;
    }
    const move = (e)=>{
        if(!isDown){
            return;
        }
        const {pageX,pageY} = e;
        //叠加模式
        ctx.globalCompositeOperation = 'destination-out';
        ctx.beginPath();
        ctx.arc(pageX,pageY,10,0,Math.PI*2);
        ctx.fill();
        ctx.closePath();
    }
    return (
        <div>
            <div className="state">中奖了</div>
            <canvas width={300} height={200} ref={canvas} onMouseDown={down} onMouseUp={up} onMouseMove={move}></canvas>
            <Button type="primary" onClick={()=>navite('/text4')}>跳转</Button>
        </div>
    )
}
export default Text3;